import React, { Component } from 'react'
import { Link } from 'react-router'
import Rain from '../Rain/index.js'
import './index.scss';

class Home extends Component {
	state = {
		list: [
			{
				title: '看歌',
				link: '/music',
				desc: '雨，淅淅沥沥、滴滴答答；风，呼呼哈哈、嘤嘤妮妮；小孩，咿咿呀呀、啊啊呀呀；听一段声音抵抗孤独；听一段声音享受孤独',
				icon: 'https://s.momocdn.com/w/u/img/2017/05/27/1495876876018-music.png'
			}, 
			{
				title: '听书',
				link: '/book',
				desc: '在图书馆中的书群；在普通百姓家中的书；在一个闻着微风，嘴角小小翘起的女孩手中的书',
				icon: 'https://s.momocdn.com/w/u/img/2017/05/27/1495877638721-yanyuan.png'
			}, 
			{
				title: '闻电影',
				link: '/movie',
				desc: '不管你怎么说，我都是一个演员',
				icon: 'https://s.momocdn.com/w/u/img/2017/05/27/1495878018173-jiaru.png'
			},
			{
				title: '写游戏',	
				link: '/game',
				desc: '爱她，思念她',
				icon: 'https://s.momocdn.com/w/u/img/2017/05/27/1495879445975-fruit.png'
			}
		]
	}

	itemClick(item){
		
	}
	render() {
		const { list } = this.state
		const _this = this
		return (
		    <div className="catalog-wrapper">
		    	<Rain />
		    	<h3 className="catalog-title">有一个色彩缤纷的？</h3>
		      	<ul>
		      		{
					    list.map(function (item) {
					      return <li onClick={_this.itemClick.bind(_this, item)} className="catalog-item">
					      			<Link to={item.link} className="flex-cont flex-info">
						      			<img className="i-icon" src={item.icon} />
						      			<div className="flex-item">
						      				<h3 className="i-title">{item.title}</h3>
						      				<p className="i-desc">{item.desc}</p>
						      			</div>
					      			</Link>
					      		 </li>
					    })
					}
		      	</ul>

		      	<div className="footer">
		      		<div className="grass"></div>
		      	</div>
		    </div>
		)
	}
}

export default Home
























